import React from 'react'
import Taro from '@tarojs/taro'
import { View,Image,Text } from '@tarojs/components'
import { AtMessage ,AtDivider,AtAvatar } from "taro-ui"
import './DoctorItemPlus.scss'

class DoctorItemPlus extends React.Component{

  constructor(){
    super(...arguments)
    const length=38
    if(this.props.introduction.length>length){
      this.state = {
        name:this.props.name+' '+this.props.name_level,
        doctor_id:this.props.doctor_id,
        status:this.props.status,
        picture:this.props.picture,
        introduction:this.props.introduction.slice(0,length).concat('...'),
        order_count:this.props.order_count,
        satis_rate:this.props.satis_rate 
      }
    }else{
      this.state = {
        name:this.props.name+' '+this.props.name_level,
        doctor_id:this.props.doctor_id,
        status:this.props.status,
        picture:this.props.picture,
        introduction:this.props.introduction,
        order_count:this.props.order_count,
        satis_rate:this.props.satis_rate 
      }
    }
  }

  handleClick = () => {
    if(this.props.status!=''){
      const page = '/pages/pagesA/selectTime/selectTime?doctor_id='+this.state.doctor_id
      Taro.navigateTo({url: page})
    }else{
      Taro.atMessage({'message': '已约满!','type': 'error',
      })
    }
  }

  render(){
    return(
      <View className='doctorItemPlus' onClick={this.handleClick}>
        <View className='top'>
          <View className='picture'>
            <AtAvatar circle image={this.state.picture}></AtAvatar>
          </View>
          <View className='doctor_things'>
            <View className='things_top'>
              <Text className='name'>{this.state.name}</Text>
              <Image src={this.props.status} className='status' style='width: 50px;height: 20px;background: #fff;'
                onClick={this.handleClick}/>
            </View>
            <Text className='introduction'>{this.state.introduction}</Text>
          </View>
        </View>
        <View className='under'>
          <Text className='number'>{'接诊量：'+this.state.order_count} </Text>
          <Text className='rate'>{'满意度:'+this.props.satis_rate+'%'} </Text>
        </View>
        <View className='end'>
          <AtDivider height='45' lineColor='#f3f3f3'/>
          <AtMessage />
        </View>
      </View>
    )
  }
}
  
export {DoctorItemPlus}